<template>
  <div style="margin: 5px">
    <czr-return-previous></czr-return-previous>
    <h1 style="margin-left:9px">我的文章</h1>
      <template v-for="item in data" :key="item.id">
        <el-card :body-style="{ padding: '0px' }" @click="articleDetail(item.id)">
          <div style="padding: 14px">
            <div style="min-height: 33px;">
              <span text class="button"> {{  ellipsis(item.title) }}</span>
            </div>
            <time class="time"> {{ dateConversion(item.updateTime) }}</time>
          </div>
        </el-card>
      </template>
  </div>

</template>
<script setup>
import { getArticlesByUserId} from "@/http/article";
import {ref, onMounted} from "vue";
import {useUserToken} from "@/store/counter";
import {useRouter} from "vue-router";
import CzrReturnPrevious from "@/components/czr-return-previous.vue";
const data = ref({});
const userToken=useUserToken();
const userId=userToken.user.id;
const router = useRouter()
onMounted(() => {
  loadData();
})
function loadData() {
  getArticlesByUserId(userId).then(res => {
    data.value = res.data.articles;
    console.log(data.value)
  }).catch(err => {
    console.log("err---", err)
  })

}
function dateConversion(dateOld){
  const date = new Date(dateOld);
  const formattedDate = `${date.getFullYear()}-${('0' + (date.getMonth()+1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;
  return formattedDate;
}
function ellipsis(value){
  if (value.length > 45) {
    return value.slice(0,45) + '...'
  }
  return value
}
const articleDetail = (id) => {
  router.push({
    name:'userArticleMain',
    params:{
      id:id,
    }
  })
};
</script>
<style scoped>

.dialog-footer button:first-child {
  margin-right: 10px;
}

ul {
  padding-inline-start: 1em;
  list-style-type: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 0.8rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.time {
  font-size: 12px;
  color: #999;
  float: right;
}
</style>


